<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>使用条件判断结合keep-alive限制只有一个子元素被渲染</title>
	<script src="vue.js"></script>
</head>
<body>
<div id="app">
  <button @click="change">切换页面</button>
  <keep-alive>
      <home v-if="index===0"></home>
      <login v-else-if="index===1"></login>
      <register v-else></register>  
  </keep-alive>
</div>
<script>
  var vm=new Vue({
      el: '#app',
      components:{
        home:{template:`<div>打开主页</div>`},
        login:{template:`<div>打开登录页面</div>`},
        register:{template:`<div>打开注册页面</div>`},
      },
      data:{
        index:0,
      },
      methods:{
        change(){
          let len = Object.keys(this.$options.components).length;
          this.index = (++this.index)%len;
        }
      }
  })
</script>
</body>
</html>